<script lang="ts" setup>
// import CalcResult from "./calc-result.vue"
// import { useBasicInfoStore, useConfigStore } from "@/store";
import CalcResult from "./calc-result.vue"

const equTabs = [
  { id: 1, label: "角色属性" },
  { id: 2, label: "伤害计算" },
  // { id: 3, label: "首饰" },
  // { id: 4, label: "特殊" },
  // { id: 5, label: "其他" }
];

const selectMode = ref(true);

const currentTab = ref(1);

const curPart = ref("上衣")
const randomSelector = ref<HTMLElement>()


const chooseEqu = (part:string) => {
    curPart.value = part
    randomSelector.value?.showDrawer()
}


</script>

<template>
  <view class="top-panel">
    <EqPanel
      ref="EqPanel"
      class="eq-panel-item"
      :can-click="selectMode"
      with-data
      @click-equ="chooseEqu"
    />
  </view>
  <view class="select-eqs">
    <form-tabs v-model:value="currentTab" class="eq-types" :tabs="equTabs" />
    <view>
      <CalcResult />
    </view>
  </view>
  <eq-set :part="curPart" ref="randomSelector" />
</template>

<style lang="scss" scoped>
.params {
  font-size: 13px;
  color: #888;
  display: flex;
  width: calc(100% - 30px);
  justify-content: space-between;
  margin-bottom: 5px;

  .selected {
    color: #ffcc33;
  }

  .role-selector {
    color: #1c1912;
    position: absolute;
    right: 20px;
  }
}

.top-panel {
    position: relative;

    .btn {
      width: 90px;
    }
  }

.eqs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  .eq-item-box {
    position: relative;
    width: calc(100% / 8);

    &.without-tips:hover {
      &:after {
        content: "";
        position: absolute;
        width: 32px;
        height: 32px;
        border: 2px solid #23aaf2;
        left: 0;
        right: 0;
      }
    }
  }

  .eq-item {
    position: relative;
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 2px;
  }
}
</style>
